<!--单位选择-->
<script setup>
import { getOrganizationList } from '@/apis/order.js'

const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  modelValue: {
    type: Array,
    default: () => []
  }
})
const emits = defineEmits(['update:model-value', 'update:show'])
const showPopup = computed({
  get() {
    return props.show
  },
  set(val) {
    emits('update:show', val)
  }
})

const selectedList = computed({
  get() {
    return props.modelValue
  },
  set(val) {
    emits('update:model-value', val)
  }
})

const list = ref([])
// handleActive
const activeIndex = ref(0)

function handleActive(index, disabled) {
  if (disabled) return
  activeIndex.value = index
}

const toggleState = (item) => {
  const index = selectedList.value.findIndex(
    (selectedItem) => selectedItem.id === item.id
  )
  if (index !== -1) {
    selectedList.value.splice(index, 1)
  } else {
    // 如果未选中，则添加到已选列表
    selectedList.value.push(item)
  }
}
const isActive = (item) => {
  return (
    selectedList.value.findIndex(
      (selectedItem) => selectedItem.id === item.id
    ) > -1
  )
}

const clearSelectedList = () => {
  selectedList.value = []
}

async function getOptions() {
  try {
    const res = await getOrganizationList()
    if (res.ret === 0) {
      list.value = res.data || []
      list.value.forEach((item) => {
        if (!item.id.includes('@')) {
          let child = JSON.stringify({
            id: item.id,
            name: item.name,
            type: item.type,
            level: item.level,
            sort: item.sort,
            areaCode: item.areaCode,
            parentId: item.parentId
          })
          if (item.children) {
            item.children.unshift(JSON.parse(child))
          } else {
            item.children = [JSON.parse(child)]
          }
        }
      })
    }
  } catch (error) {
    /* empty */
  }
}
onMounted(() => {
  getOptions()
})
</script>

<template>
  <van-popup
    v-model="showPopup"
    :style="{ height: '60%' }"
    close-icon="arrow-down"
    closeable
    custom-style="border-top-left-radius: 3px;height:'30%', border-top-right-radius: 3px;"
    position="bottom"
    round
  >
    <div class="h-full box-border overflow-hidden pb-65px flex flex-col">
      <div
        class="px-12px flex items-center border-b-1px h-50px border-b-solid border-b-[#F2F5FA]"
      >
        <span class="text-16px font-600 leading-16px text-#171A1D">
          处理单位
        </span>
      </div>
      <div
        class="w-full box-border flex-1 flex overflow-x-hidden overflow-y-auto"
      >
        <ul
          class="w-110px box-border h-full overflow-x-hidden overflow-y-auto pl-12px pb-12px border-r-1px border-r-solid border-r-[#F2F5FA]"
        >
          <li
            v-for="(item, index) in list"
            :key="item.id"
            :class="{
              active: activeIndex === index,
              disabled: item.disabled
            }"
            class="py-9px text-14px font-400 leading-20px"
            @click="handleActive(index, item.disabled)"
          >
            {{ item.name }}
          </li>
        </ul>
        <ul
          class="box-border flex-1 h-full pl-24px pr-12px pb-12px overflow-x-hidden overflow-y-auto"
        >
          <li
            v-for="it in list[activeIndex]?.children"
            :key="it.name"
            :class="isActive(it) ? 'active' : ''"
            class="item h-24px relative py-5px text-14px font-400 leading-24px flex justify-between"
            @click="toggleState(it)"
          >
            <span class="flex-1 flex h-full overflow-x-auto whitespace-nowrap">
              {{ it.name }}
            </span>
            <div class="w-20px h-full flex justify-end items-center">
              <img
                v-if="!isActive(it)"
                alt=""
                class="w-16px h-16px"
                src="@/assets/img/icon-select-no.svg"
              />
              <img
                v-if="isActive(it)"
                alt=""
                class="w-16px h-16px"
                src="@/assets/img/icon-select-yes.svg"
              />
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div
      class="absolute bottom-0 h-65px pb-15px pt-10px px-12px w-full box-border shadow-[0_-10px_16px_0_#0000000d] bg-#FFFFFF"
    >
      <div class="flex justify-between w-full gap-10px box-border">
        <van-button
          class="w-96px h-40px"
          plain
          type="primary"
          @click="clearSelectedList"
        >
          重置
        </van-button>
        <van-button
          class="w-240px h-40px"
          type="primary"
          @click="showPopup = false"
        >
          确定
        </van-button>
      </div>
    </div>
  </van-popup>
</template>

<style lang="less" scoped>
.van-button--primary {
  font-size: 16px;
  line-height: 16px;
  font-weight: 500;
  color: #fff;
  background-color: #36b374;
  border: 1px solid #36b374;
  border-radius: 4px;
}

.van-button--plain.van-button--primary {
  color: #07c160;
}

.van-button--plain {
  background-color: #fff;
}

li.active {
  color: #36b374;
}

li.disabled {
  color: #999999;
}
</style>
